import { CardCategory, CardCategoryList, CardCategoryMap, EnergyType, EnergyTypeList, EnergyTypeMap, RareList, TriggerType, TriggerTypeList, TriggerTypeMap, UaCardSearchRequest } from "../../models/ua-card.model";

// components/card-filter/card-filter.compoent.ts.ts
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    defaultSearchRequest: { type: Object, value: {} },
    needEnergyCountMax: { type: Number, value: 15 },
    bpMax: { type: Number, value: 8000 },
    generateEnergyCountMax: { type: Number, value: 3 },
    attributes: { type: String, value: '' },
    packNos: { type: String, value: '' },
    color: { type: String, value: '' }
  },

  observers: {
    'defaultSearchRequest': function () {
      const data = this.data.defaultSearchRequest as UaCardSearchRequest;
      this.setData({
        // needEnergyCountMax: data.needEnergyCountMax,
        // needApMax: data.needApMax,
        // bpMax: data.bpMax,
        // generateEnergyCountMax: data.generateEnergyCountMax,
        needEnergyCount: [data.needEnergyCountMin!, data.needEnergyCountMax!],
        needEnergyCountDefault: [data.needEnergyCountMin!, data.needEnergyCountMax!],
        needAp: [data.needApMin!, data.needApMax!],
        needApDefault: [data.needApMin!, data.needApMax!],
        bp: [data.bpMin!, data.bpMax!],
        bpDefault: [data.bpMin!, data.bpMax!],
        generateEnergyCount: [data.generateEnergyCountMin!, data.generateEnergyCountMax!],
        generateEnergyCountDefault: [data.generateEnergyCountMin!, data.generateEnergyCountMax!],
        attribute: data.attribute,
        attributeText: !!data.attribute ? data.attribute : '不限',
        packNo: data.packNo,
        packNoText: !!data.packNo ? data.packNo : '不限',
        needEnergyText: !!data.needEnergyType ? EnergyTypeMap[data.needEnergyType] : '全部颜色',
        needEnergyType: data.needEnergyType ?? '',
        generateEnergyText: !!data.generateEnergyType ? EnergyTypeMap[data.generateEnergyType] : '全部颜色',
        generateEnergyType: data.generateEnergyType ?? '',
        cardCategoryText: !!data.cardCategory ? CardCategoryMap[data.cardCategory] : '不限',
        cardCategory: data.cardCategory ?? '',
        triggerTypeText: !!data.triggerType ? TriggerTypeMap[data.triggerType] : '不限',
        triggerType: data.triggerType ?? ''
      });
      setTimeout(() => {
        this.searchClick();
      }, 300);
    },
    'attributes': function () {
      const attributes = this.data.attributes;
      let attributeStrs: string[] = [];
      if (!!attributes) {
        attributeStrs = attributes.split(',');
      }
      const attributeList = [{ label: "不限", value: '' }];
      for (const attr of attributeStrs) {
        attributeList.push({
          label: attr, value: attr
        })
      }
      this.setData({ attributeList, attributeShow: true });
    },
    'packNos': function () {
      const packNos = this.data.packNos;
      let packStrs: string[] = [];
      if (!!packNos) {
        packStrs = packNos.split(',');
      }
      const packNoList = [{ label: "不限", value: '' }];
      for (const pack of packStrs) {
        packNoList.push({
          label: pack, value: pack
        })
      }
      this.setData({ packNoList, packNoShow: true });
    },
    'color': function () {
      const type = this.data.color as EnergyType;
      this.setData({
        needEnergyType: type,
        needEnergyText: !!type ? EnergyTypeMap[type] : '全部颜色',
      })
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    needEnergyCount: [0, 15],
    needEnergyCountDefault: [0, 15],
    needAp: [0, 3],
    needApDefault: [0, 3],
    needApMax: 3,
    bp: [0, 8000],
    bpDefault: [0, 8000],
    generateEnergyCount: [0, 3],
    generateEnergyCountDefault: [0, 3],
    needEnergyText: '全部颜色',
    needEnergyTypeList: [{ label: "全部颜色", value: '' }, ...EnergyTypeList],
    needEnergyVisible: false,
    needEnergyType: '',
    generateEnergyText: '全部颜色',
    generateEnergyTypeList: [{ label: "全部颜色", value: '' }, ...EnergyTypeList],
    generateEnergyVisible: false,
    generateEnergyType: '',
    rareText: '全部罕见度',
    rareList: [{ label: "全部罕见度", value: '' }, ...RareList],
    rareVisible: false,
    rare: '',
    cardCategoryText: '不限',
    cardCategoryList: [{ label: "不限", value: '' }, ...CardCategoryList],
    cardCategoryVisible: false,
    cardCategory: '',
    triggerTypeText: '不限',
    triggerTypeList: [{ label: "不限", value: '' }, ...TriggerTypeList],
    triggerTypeVisible: false,
    triggerType: '',
    attributeText: '不限',
    attributeList: [{ label: "不限", value: '' }],
    attributeVisible: false,
    attribute: '',
    attributeShow: false,
    packNoText: '不限',
    packNoList: [{ label: "不限", value: '' }],
    packNoVisible: false,
    packNo: '',
    packNoShow: false,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    searchClick() {
      const data: UaCardSearchRequest = {
        needEnergyCountMin: this.data.needEnergyCount[0],
        needEnergyCountMax: this.data.needEnergyCount[1],
        needEnergyType: !!this.data.needEnergyType ? this.data.needEnergyType as EnergyType : undefined,
        bpMin: this.data.bp[0],
        bpMax: this.data.bp[1],
        generateEnergyCountMin: this.data.generateEnergyCount[0],
        generateEnergyCountMax: this.data.generateEnergyCount[1],
        generateEnergyType: !!this.data.generateEnergyType ? this.data.generateEnergyType as EnergyType : undefined,
        needApMin: this.data.needAp[0],
        needApMax: this.data.needAp[1],
        cardCategory: !!this.data.cardCategory ? this.data.cardCategory as CardCategory : undefined,
        triggerType: !!this.data.triggerType ? this.data.triggerType as TriggerType : undefined,
        attribute: this.data.attribute,
        packNo: this.data.packNo,
        rare: this.data.rare
      }

      this.triggerEvent('onsearch', JSON.parse(JSON.stringify(data)));
    },

    resetClick() {
      const data = this.data.defaultSearchRequest as UaCardSearchRequest;
      data.bpMin = 0;
      data.bpMax = this.data.bpMax;
      data.generateEnergyCountMin = 0;
      data.generateEnergyCountMax = this.data.generateEnergyCountMax;
      data.needApMin = 0;
      data.needApMax = 3;
      data.needEnergyCountMin = 0;
      data.needEnergyCountMax = this.data.needEnergyCountMax;
      data.attribute = '';
      data.packNo = '';
      data.cardCategory = undefined;
      data.generateEnergyType = undefined;
      data.needEnergyType = undefined;
      data.triggerType = undefined;
      data.rare = '';
      this.setData({
        triggerTypeText: '不限',
        triggerType: '',
        cardCategoryText: '不限',
        cardCategory: '',
        generateEnergyText: '全部颜色',
        generateEnergyType: '',
        needEnergyText: '全部颜色',
        attributeText: '不限',
        attribute: '',
        packNoText: '不限',
        packNo: '',
        rareText: '全部罕见度',
        rare: '',
        needEnergyType: '',
        // needEnergyCountMax: data.needEnergyCountMax,
        // needApMax: data.needApMax,
        // bpMax: data.bpMax,
        // generateEnergyCountMax: data.generateEnergyCountMax,
        needEnergyCount: [data.needEnergyCountMin!, data.needEnergyCountMax!],
        needAp: [data.needApMin!, data.needApMax!],
        bp: [data.bpMin!, data.bpMax!],
        generateEnergyCount: [data.generateEnergyCountMin!, data.generateEnergyCountMax!],
        needEnergyCountDefault: [data.needEnergyCountMin!, data.needEnergyCountMax!],
        needApDefault: [data.needApMin!, data.needApMax!],
        bpDefault: [data.bpMin!, data.bpMax!],
        generateEnergyCountDefault: [data.generateEnergyCountMin!, data.generateEnergyCountMax!]
      });
      this.triggerEvent('onreset', JSON.parse(JSON.stringify(data)));
    },

    onNeedEnergyCountRangeChange(e: any) {
      this.setData({
        needEnergyCount: e.detail.value
      });
    },

    onBpRangeChange(e: any) {
      this.setData({
        bp: e.detail.value
      });
    },

    onNeedApRangeChange(e: any) {
      this.setData({
        needAp: e.detail.value
      });
    },

    onGenerateEnergyCountRangeChange(e: any) {
      this.setData({
        generateEnergyCount: e.detail.value
      });
    },

    onNeedEnergyTypePicker() {
      this.setData({
        needEnergyVisible: true
      });
    },

    onNeedEnergyTypePickerCancel() {
      this.setData({
        needEnergyVisible: false
      });
    },

    onNeedEnergyTypePickerConfirm(e: any) {
      this.setData({
        needEnergyText: e.detail.label[0],
        needEnergyType: !!e.detail.value[0] ? e.detail.value[0] : ''
      });
    },

    onRarePicker() {
      this.setData({
        rareVisible: true
      });
    },

    onRarePickerCancel() {
      this.setData({
        rareVisible: false
      });
    },

    onRarePickerConfirm(e: any) {
      this.setData({
        rareText: e.detail.label[0],
        rare: !!e.detail.value[0] ? e.detail.value[0] : ''
      });
    },

    onGenerateEnergyTypePicker() {
      this.setData({
        generateEnergyVisible: true
      });
    },

    onGenerateEnergyTypePickerCancel() {
      this.setData({
        generateEnergyVisible: false
      });
    },

    onGenerateEnergyTypePickerConfirm(e: any) {
      this.setData({
        generateEnergyText: e.detail.label[0],
        generateEnergyType: !!e.detail.value[0] ? e.detail.value[0] : ''
      });
    },

    onCardCategoryPicker() {
      this.setData({
        cardCategoryVisible: true
      });
    },

    onCardCategoryPickerCancel() {
      this.setData({
        cardCategoryVisible: false
      });
    },

    onCardCategoryPickerConfirm(e: any) {
      this.setData({
        cardCategoryText: e.detail.label[0],
        cardCategory: !!e.detail.value[0] ? e.detail.value[0] : ""
      });
    },

    onTriggerTypePicker() {
      this.setData({
        triggerTypeVisible: true
      });
    },

    onTriggerTypePickerCancel() {
      this.setData({
        triggerTypeVisible: false
      });
    },

    onTriggerTypePickerConfirm(e: any) {
      this.setData({
        triggerTypeText: e.detail.label[0],
        triggerType: !!e.detail.value[0] ? e.detail.value[0] : ""
      });
    },

    onAttributePicker() {
      this.setData({
        attributeVisible: true
      });
    },

    onAttributePickerCancel() {
      this.setData({
        attributeVisible: false
      });
    },

    onAttributePickerConfirm(e: any) {
      this.setData({
        attributeText: e.detail.label[0],
        attribute: e.detail.value[0]
      });
    },

    onPackNoPicker() {
      this.setData({
        packNoVisible: true
      });
    },

    onPackNoPickerCancel() {
      this.setData({
        packNoVisible: false
      });
    },

    onPackNoPickerConfirm(e: any) {
      this.setData({
        packNoText: e.detail.label[0],
        packNo: e.detail.value[0]
      });
    },
  }
})